<template>
  <div>
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-item label="账套名称">
                <a-select allowClear placeholder="账套名称" v-model="queryParam.company">
                  <a-select-option :value="item.value" v-for="item in companyList" :key="item.id">{{
                    item.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="项目名称">
                <a-select allowClear placeholder="请选择项目名称" v-model="queryParam.subjects">
                  <a-select-option :value="item.value" v-for="item in subjectsList" :key="item.id">{{
                    item.label
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="会计期间">
                <a-range-picker format="yyyy-MM-DD" value-format="yyyy-MM-DD" v-model="queryParam.year" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="bar-chart">分析</a-button>
                <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a> -->
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="model_box">
        <div class="tree_chart_box">
          <TreeChart height="300px" :chartData="treeData" @getMychart="handleGetMyChart" />
        </div>
        <div class="model_table">
          <a-table size="small" :columns="columns" :data-source="tableData" :pagination="false" bordered></a-table>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

import TreeChart from './components/TreeChart.vue'
import columns from './columns'
export default {
  name: 'xmykmxyj',
  mixins: [JeecgListMixin],
  components: {
    TreeChart,
  },
  mounted() {},
  data() {
    return {
      queryParam: {},
      companyList: [],
      subjectsList: [],
      columns,
      // 树形关系图
      treeData: {
        id: 'root',
        label: {
          formatter: [`{first|${'国道109项目盈亏模型'}}`].join('\n'),
          rich: {
            first: {
              backgroundColor: '#04458e',
              color: '#fff',
              align: 'center',
              width: 300,
              height: 30,
              //   borderRadius: 5,
              borderWidth: 2,
              borderColor: '#3e84d1',
            },
          },
        },
        children: [
          {
            id: '1',
            label: {
              backgroundColor: '#fff',
              //   borderRadius: [0, 0, 5, 5],
              borderWidth: 1.5,
              borderColor: '#3e84d1',
              formatter: [`{first|① ${'收入'}}`, `{second|${600} 万元} `].join('\n'),
              rich: {
                first: {
                  backgroundColor: '#04458e',
                  color: '#fff',
                  align: 'center',
                  width: 135,
                  height: 30,
                  //   borderRadius: [5, 5, 0, 0],
                },
                second: {
                  color: '#888',
                  align: 'center',
                  fontSize: 15,
                  lineHeight: 20,
                },
              },
            },
            children: [
              {
                id: '2',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|② ${'开累验工'}}`, `{second|${600} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
              {
                id: '3',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|③ ${'超前验工'}}`, `{second|${100} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
              {
                id: '4',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|④ ${'应验未验'}}`, `{second|${100} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
            ],
          },
          {
            label: {
              formatter: ['{first|}', `{second|${'+100'}万}`].join('\n'),

              offset: [0, -10],
              rich: {
                first: {
                  backgroundColor: {
                    image: require('@/assets/mxyj/ying.png'),
                  },
                  //   color: '#fff',
                  //   align: 'center',
                  width: 60,
                  height: 60,
                  //   borderRadius: 5,
                },
                second: {
                  fontSize: 18,
                  padding: [5, 0, 0, 0],
                  color: 'red',
                },
              },
            },
          },
          {
            id: '5',
            label: {
              backgroundColor: '#fff',
              //   borderRadius: [0, 0, 5, 5],
              borderWidth: 1.5,
              borderColor: '#3e84d1',
              formatter: [`{first|⑤ ${'成本及费用'}}`, `{second|${500} 万元} `].join('\n'),
              rich: {
                first: {
                  backgroundColor: '#04458e',
                  color: '#fff',
                  align: 'center',
                  width: 135,
                  height: 30,
                  //   borderRadius: [5, 5, 0, 0],
                },
                second: {
                  color: '#888',
                  align: 'center',
                  fontSize: 15,
                  lineHeight: 20,
                },
              },
            },
            children: [
              {
                id: '6',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|⑥ ${'成本费用账面数'}}`, `{second|${400} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
              {
                id: '7',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|⑦ ${'预列成本'}}`, `{second|${50} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
              {
                id: '8',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|⑧ ${'二级公司管理费'}}`, `{second|${100} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
              {
                id: '9',
                label: {
                  backgroundColor: '#fff',
                  //   borderRadius: [0, 0, 5, 5],
                  borderWidth: 1.5,
                  borderColor: '#3e84d1',
                  formatter: [`{first|⑨ ${'三级公司管理费'}}`, `{second|${50} 万元} `].join('\n'),
                  rich: {
                    first: {
                      backgroundColor: '#04458e',
                      color: '#fff',
                      align: 'center',
                      width: 135,
                      height: 30,
                      //   borderRadius: [5, 5, 0, 0],
                    },
                    second: {
                      color: '#888',
                      align: 'center',
                      fontSize: 15,
                      lineHeight: 20,
                    },
                  },
                },
              },
            ],
          },
        ],
        // TODO tree点击
        // clickCallback: (param) => {
        //   console.log(param)
        // },
      },
      // 表格数据
      tableData: [
        {
          danjia: '109国道项目经理部',
          hwjfpj: 1000,
          wccz: 600,
          ygjj: 600,
          cqyg: 100,
          ywg: 50,
          ypf: 50,
          tzjc: 0,
        },
      ],
      chart: undefined,
      url: {},
    }
  },
  methods: {
    handleGetMyChart(chart) {
      chart.on('click', this.handleTreeClick)
      this.chart = chart
    },
    handleTreeClick(param) {
      console.log(param);
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import './index.less';
</style>